(function () {
    const div = document.querySelector('.xtx-elevator');
    const liDing = document.querySelector('#backTop')
    window.addEventListener('scroll', function () {
        const yemiantop = document.documentElement.scrollTop
        // if( yemiantop>=300){
        //    div.style.opacity='1'
        // }
        div.style.opacity = yemiantop >= 300 ? '1' : '0'
    })
    liDing.addEventListener('click', function () {
        window.scrollTo(0, 0)
        // document.documentElement.scrollTop=0
    })
})();

(function () {
    const ul = document.querySelector('.xtx-elevator-list');
    const newgoods = document.querySelector('.xtx_goods_new');
    const popular = document.querySelector('.xtx_goods_popular');
    const brand = document.querySelector('.xtx_goods_brand');
    const topic = document.querySelector('.xtx_goods_topic');

    ul.addEventListener('click', function (e) {
        if (e.target.tagName === 'A'&&e.target.dataset.name) {
            const li = e.target.dataset.name
            switch (li) {
                case 'newgoods':
                    window.scrollTo(0, newgoods.offsetTop)
                    break;
                case 'popular':
                    window.scrollTo(0, popular.offsetTop)
                    break;
                case 'brand':
                    window.scrollTo(0, brand.offsetTop)
                    break;
                case 'topic':
                    window.scrollTo(0, topic.offsetTop)
                    break;
                    default:
                        alert('bug')
            }
        }
    })

    window.addEventListener('scroll',function(){
        const documentA=document.documentElement.scrollTop
        ul.querySelector('a.active') &&ul.querySelector('a.active').classList.remove('active')
        // console.log(documentA);
        if(documentA>=newgoods.offsetTop&&documentA<popular.offsetTop){
             ul.querySelector('a[data-name=newgoods]').classList.add('active')
        }else if(documentA>=popular.offsetTop&&documentA<brand.offsetTop){
            ul.querySelector('a[data-name=popular]').classList.add('active')
        }else if(documentA>=brand.offsetTop&&documentA<topic.offsetTop){
            ul.querySelector('a[data-name=brand]').classList.add('active')
        }else if(documentA>=topic.offsetTop){
            ul.querySelector('a[data-name=topic]').classList.add('active')
        }
    })
})();